import React,{useState} from "react";
import styles from './Gobang.module.css';
const Gobang = () => {
    /*  
    五子棋
    1、画棋盘5*5
    2、下棋，和提示当前下棋者
    3、判断是否获胜，和提示当前玩家是否获胜
    4、判断平局，和提示当前玩家是否平局(目前用棋盘已满判断)
     */
    const [squares, setSquares] = useState(Array(25).fill(null));
    const [isXNext, setIsXNext] = useState(true);
    // 点击格子
    const handleClick = (index) => {
        // 增加平局判断
        if (squares[index] || winner || isDraw) return;
        const newSquares = squares.slice();
        newSquares[index] = isXNext ? 'X' : 'O';
        setSquares(newSquares)
        setIsXNext(!isXNext)
    }
    const resetGame=()=>{
        setSquares(Array(25).fill(null))
        setIsXNext(true)
    }
    // 在文件底部添加这个函数
    function calculateWinner(squares) {
      const size = 5; // 棋盘尺寸
      // 检查所有可能的起点
      for (let i = 0; i < squares.length; i++) {
        const row = Math.floor(i / size);
        const col = i % size;
        const current = squares[i];
        
        if (!current) continue; // 跳过空位
        
        // 检查四个方向
        const directions = [
          [0, 1],  // 水平 →
          [1, 0],  // 垂直 ↓
          [1, 1],  // 右斜 ↘
          [1, -1], // 左斜 ↙
        ];
        
        for (const [dx, dy] of directions) {
          let count = 1;
          // 向正方向检查
          let x = row + dx;
          let y = col + dy;
          while (x >= 0 && x < size && y >= 0 && y < size && squares[x * size + y] === current) {
            count++;
            x += dx;
            y += dy;
          }
          
          // 向反方向检查
          x = row - dx;
          y = col - dy;
          while (x >= 0 && x < size && y >= 0 && y < size && squares[x * size + y] === current) {
            count++;
            x -= dx;
            y -= dy;
          }
          
          if (count >= 5) return current; // 五连珠成立
        }
      }
      return null;
    }
    const winner = calculateWinner(squares);
    const isDraw = !winner && squares.every(square => square !== null); // 新增平局判断
    
    let ticketTxt;
    if (winner) {
        ticketTxt = `胜利者：${winner === 'X' ? '黑棋' : '白棋'}`;
    } else if (isDraw) {
        ticketTxt = '棋逢对手，平局！';
    } else {
        ticketTxt = `下一步：${isXNext ? '黑棋' : '白棋'}`;
    }

    return (
        <div className={styles.boardContainer}>
            <h1>Gobang</h1>
            {winner ? (
                <div className={styles.winnerBanner}>
                    🎉 游戏结束！{winner === 'X' ? '黑棋' : '白棋'}获胜！
                </div>
            ) : (isDraw ? (  // 新增平局显示
                <div className={styles.drawBanner}>
                    🤝 棋盘已满，平局！
                </div>
            ) : (
                <div>{ticketTxt}</div>
            ))}
            <div className={styles.board}>
                {squares.map((square, index) => (
                    <div  
                        key={index} 
                        className={`${styles.square} ${square ? styles['chess'+square] : ''}`}
                        onClick={() => handleClick(index)}
                    >
                    </div>
                ))}
            </div>
            <button 
                className={styles.resetButton}
                onClick={resetGame}
            >
                重新开始
            </button>
        </div>
    )
}
export default  Gobang;